<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📰 新闻发布系统 - 现代化管理平台</title>
    <meta name="description" content="现代化新闻发布与管理系统">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>📰 新闻发布系统</h1>
        <nav>
            <button id="homeBtn" class="nav-btn active">🏠 首页</button>
            <button id="searchBtn" class="nav-btn">🔍 搜索</button>
            <button id="publishBtn" class="nav-btn">✍️ 发布</button>
        </nav>
    </header>

    <!-- 首页 - 新闻列表 -->
    <main id="homePage" class="page active">
        <div class="page-header">
            <h2>📋 所有新闻</h2>
            <button id="refreshBtn" class="btn btn-secondary">🔄 刷新列表</button>
        </div>
        <div id="newsList" class="news-list">
            <!-- 新闻列表将通过 JavaScript 动态加载 -->
        </div>
    </main>

    <!-- 搜索页面 -->
    <main id="searchPage" class="page">
        <div class="page-header">
            <h2>🔍 智能搜索</h2>
        </div>
        <div class="search-container">
            <input type="text" id="searchKeyword" placeholder="🔎 输入关键词，支持实时搜索..." class="search-input">
            <button id="searchBtnMain" class="btn btn-primary">🔍 搜索</button>
        </div>
        <div id="searchResults" class="news-list">
            <!-- 搜索结果将通过 JavaScript 动态加载 -->
        </div>
    </main>

    <!-- 发布新闻页面 -->
    <main id="publishPage" class="page">
        <div class="page-header">
            <h2>✍️ 发布新闻</h2>
        </div>
        <form id="newsForm" class="news-form">
            <input type="hidden" id="newsId" name="newsId">
            <div class="form-group">
                <label for="newsTitle">📝 新闻标题</label>
                <input type="text" id="newsTitle" name="title" required class="form-control" placeholder="请输入吸引人的标题...">
            </div>
            <div class="form-group">
                <label for="newsCategory">📂 新闻分类</label>
                <input type="text" id="newsCategory" name="category" required class="form-control" placeholder="请输入或选择新闻分类..." list="categoryList">
                <datalist id="categoryList">
                    <option value="时政新闻">
                    <option value="经济新闻">
                    <option value="科技新闻">
                    <option value="体育新闻">
                    <option value="娱乐新闻">
                    <option value="社会新闻">
                    <option value="国际新闻">
                    <option value="军事新闻">
                    <option value="文化新闻">
                    <option value="教育新闻">
                </datalist>
            </div>
            <div class="form-group">
                <label for="newsAuthor">👤 作者姓名</label>
                <input type="text" id="newsAuthor" name="author" required class="form-control" placeholder="请输入作者姓名...">
            </div>
            <div class="form-group">
                <label for="newsContent">📄 新闻内容</label>
                <textarea id="newsContent" name="content" rows="10" required class="form-control" placeholder="请输入新闻正文内容..."></textarea>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">✨ 发布新闻</button>
                <button type="reset" class="btn btn-secondary">🔄 重置表单</button>
            </div>
        </form>
    </main>

    <!-- 新闻详情模态框 -->
    <div id="newsModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="newsDetailContent">
                <!-- 新闻详情内容 -->
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div id="messageToast" class="toast">
        <span id="messageText"></span>
    </div>
</div>

<script src="js/app.js"></script>
</body>
</html>